<template>
  <div class="app-container customer-div">
    <el-row :gutter="20">
      <!-- <el-col :span="5">
        <div style="border:1px solid #eee;min-height:calc(100vh - 150px);padding:20px 10px;min-width:200px">
          <div style="overflow: hidden">
            <span style="float: right ;">
            <el-button
              size="mini"
              type="primary"
              class="btn-add"
              @click="allGroup"
              style="margin-left: 60px;"
              >
              全部仓库
            </el-button>
            <el-button
              size="mini"
              type="primary"
              class="btn-add"
              @click="addGroupFn('add')"
              style="float:right">
              新增分组
            </el-button>
            </span>
          </div>
          <div style="margin-top:20px" v-loading="dataLoading">
            <el-tree
              :highlight-current="true"
              @node-click="nodeClick"
              :data="getWhGroupDataList"
              node-key="id"
              default-expand-all
              :props="props"
              :expand-on-click-node="false">
              <span class="custom-tree-node" style="width:100%" slot-scope="{ data }">
                <span style="float: left; padding-left:10px ;" >{{data.group_name}}</span>
                <span style="float: right; padding-right:40px ">
                  <el-button
                    type="text"
                    size="mini"
                    @click.stop.native="addGroupFn('edit',data)">
                    修改
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    @click.stop.native="removeWhGroup(data)">
                    删除
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
      </el-col> -->
      <el-col :span="24">
        <!--数据列表-->
        <div class="table-container">
          <vxe-grid ref='xGrid'  v-bind="gridOptions" size="mini" :loading="listLoading">
            <template #form>
              <!--搜索-->
              <div>
                <div style="background: #f5f7fa;padding:15px 15px 0 15px;border:1px solid #EBEEF5;border-bottom:0.5px solid #EBEEF5;">
                  <el-form :inline="true" :model="listQuery2" size="mini" label-width="100px">
                    <el-form-item label="关键字：">
                      <el-input clearable v-model="listQuery2.keywords"></el-input>
                    </el-form-item>
                    <el-form-item label="仓库分组：">
                      <el-select style="width: 190px" v-model="listQuery2.groupsId" clearable>
                        <el-option
                          v-for="item in whGroupLists"
                          :label="item.groupName"
                          :value="item.groupId"
                          :key="item.groupId"
                        ></el-option>
                       </el-select>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        @click="handleSearchList()"
                        type="primary">
                        查询
                      </el-button>
                      <el-button
                        @click="editGoods('add',null)"
                        type="primary">
                        新增
                      </el-button>
                      <!-- <el-button
                        @click="handleSearchList()"
                        type="primary">
                        导入
                      </el-button> -->
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </template>
            <template #pager>
              <div style="overflow: hidden">
                <div class="pagination-container" style="float:right;">
                  <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes,prev, pager, next,jumper"
                    :current-page.sync="listQuery2.pageNum"
                    :page-size="listQuery2.pageSize"
                    :page-sizes="[10,15,20,50,100,200]"
                    :total="count">
                  </el-pagination>
                </div>
              </div>
            </template>
            <template #num3_default="{ row, rowIndex }">
              <el-button style="margin-right:10px;" type="text" size="small" @click="editGoods('edit',row)">编辑</el-button>
              <el-button style="margin-right:10px;" type="text" size="small" @click="delGoods(row)">删除</el-button>
            </template>
          </vxe-grid>
        </div>
      </el-col>
    </el-row>

    <!--新增编辑仓库-->
    <addWerehouse ref="addWerehouse" @update="getListData" ></addWerehouse>

    <!--新增分组-->
    <!-- <addWerehouseGroup ref="addWerehouseGroup" @update = 'getWhGroupLists'></addWerehouseGroup> -->

  </div>
</template>

<script>
import {
  getWarehouseList,
  getWhGroupList,
  WhGroupDelete,
  warehouseDelete,
  getWhGroupData
} from '@/api/allInLine/management.js'
import {formatDate} from '@/utils/date';
import addWerehouse from './InquiryCom/addWerehouse'
import addWerehouseGroup from './InquiryCom/addWerehouseGroup'
import store from '@/store'
import { mapGetters } from 'vuex'

const defaultListQuery={
  // pageNum: 1,
  // pageSize: 10,
  // supplierId: '',
  // groupsId:'',
  // contactName:'',
  // inquiryDate:null,
  // goodsKingId:'',
  // createUserId:'',
  // tab:'today'
};
const defaultListQuery2 = {
    groupsId:'',
    keywords : "",  //关键词
    pageSize : 10,
    pageNum : 1
}
export default {
  name: "index",
  data(){
    return{
      whGroupLists: [], // 分组列表
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
      count:0,
      listLoading:false,
      value:true,
      loading:false,
      // loading2:false,
      // supplierList2:[],
      // options:[],
      // userOptionList:[],
      // getWhGroupDataList:[],// 仓库分组数据
      // type:1,
      gridOptions:{
        loading:this.listLoading,
        border: true,
        id: 'goodsInformation',
        align:'center',
        autoResize:true,
        height:800,
        size:'mini',
        rowConfig: {
          keyField: 'ogId',
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },
        checkboxConfig:{
          reserve:true
        },
        toolbarConfig: {
          zoom: true,
          custom: true,
          // slots: {
          //   buttons: 'toolbar_buttons',
          // }
        },
        columns: [
          {
            field: 'warehouseName',
            title: '仓库名称',
            minWidth: 150,
          },
          {
            field: 'companyName',
            title: '公司名称',
            minWidth: 150,
          },
          {
            field: 'groupName',
            title: '仓库分组',
            minWidth: 150,
          },
          {
            field: 'areaInfo',
            title: '所在地区',
            minWidth: 150,
          },
          {
            field: 'address',
            title: '详情地址',
            minWidth: 150,
          },
          {
            field: 'sortOrder',
            title: '排序',
            minWidth: 150,
          },
          {
            field: 'remark',
            title: '备注',
            minWidth: 100,
          },
          {
            field: 'setting',
            title: '操作',
            minWidth: 150,
            fixed:'right',
            slots: {
              // 使用插槽模板渲染
              default: 'num3_default',
            }
          },
        ],
        data:[{}],
      },
      data : [],
      // data2:[],
      // props: {
      //   label: 'categoryName',
      //   children: 'children'
      // },
      // dataLoading:false

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
    this.getListData();
    this.getWhGroupDatas();
    // this.getUserOptionList();
    // this.getWhGroupLists()

  },
  components : {
    addWerehouse,addWerehouseGroup

  },
  filters: {
    formatTime(time) {
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd')
    },
    filterGroupsId(value){
      if(value) {
        return value.group_name
      }else {
        return ''
      }



    }
  },
  methods: {
    getWhGroupDatas() {
      getWhGroupData().then((res) => {
        this.whGroupLists = res;
      });
    },
    // 全部仓库
    // allGroup(){
    //   this.listQuery2 = JSON.parse(JSON.stringify(defaultListQuery2))
    //   this.handleSearchList()
    // },

     // 获取商品分类
    //  getWhGroupLists() {
    //   getWhGroupList().then(res=>{
    //     this.getWhGroupDataList=res.data
    //   })
    // },


    // addGroupFn(type,item){
    //   this.$refs.addWerehouseGroup.showPop(item)

    // },
    //树结构点击时
    // nodeClick(data){
    //   this.listQuery2.pageNum = 1;
    //   this.listQuery2.groupsId = data.warehouse_group_id;
    //   this.getListData()
    // },

    //获取品名列表
    // getBuMenList(){
    //   this.dataLoading = true;
    //   getDeptList().then((res)=>{
    //     this.data = res;
    //     this.data2 = [];
    //     this.data2 = this.forTree(this.data);
    //     this.dataLoading = false;
    //   })
    // },

     //去除不要的children
     forTree(list){
            let newList = list;
            if(newList.length){
                for (let i = 0; i<newList.length; i++){
                    if(newList[i].children && newList[i].children.length > 0){
                        this.forTree(newList[i].children)
                    }else{
                        delete newList[i].children;
                    }
                }
                return newList
            }
        },

    //编辑商品
    editGoods(type,item){
      this.$refs.addWerehouse.showPop(type,item)
    },
    // 查询
    handleSearchList(){
      this.listQuery2.pageNum = 1;
      this.getListData();
    },
    //获取列表
    getListData(){
      this.listLoading = true;
      let data = JSON.parse(JSON.stringify(this.listQuery2));
      getWarehouseList(data).then((res) => {
        this.gridOptions.data = res.list;
        this.count = res.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      })
    },
    // 分页
    handleSizeChange(val){
      this.listQuery2.pageNum = 1;
      this.listQuery2.pageSize = val;
      this.getListData();
    },
    handleCurrentChange(val){
      this.listQuery2.pageNum = val;
      this.getListData();
    },
     //删除分组
    // removeWhGroup(data){
    //       if(data)
    //         this.$confirm('确定删除?', '提示', {
    //             confirmButtonText: '确定',
    //             cancelButtonText: '取消',
    //             type: 'warning'
    //         }).then(() => {
    //           WhGroupDelete({warehouseGroupId:data.warehouse_group_id}).then(()=>{
    //             this.getWhGroupLists()
    //                 this.$message({
    //                     type: 'success',
    //                     message: '删除成功!'
    //                 });
    //             });

    //         }).catch(() => {
    //             this.$message({
    //                 type: 'info',
    //                 message: '已取消删除'
    //             });
    //         });
    //     },
    delGoods(data){
      if(data)
        this.$confirm('确定删除该仓库信息?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
          warehouseDelete({warehouseId:data.warehouseId}).then(()=>{
            this.getListData();
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            });
        }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });
        });
      },
  },
}
</script>

<style scoped lang="scss">
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-right: 8px;
    .el-tree-node__content{
      line-height: 30px;
    }
  }
</style>
